<template lang="html">
  <div class="demo-header-page">
    <ui-header>首页<a slot="right"><i class="iconfont ui-header-home-icon">&#xe65c;</i></a></ui-header>
    <div class="eg-page_bd mt30 pl20 pr20">

      <!-- buttons -->
      <a href="javascript:;" class="weui-btn weui-btn_primary">页面主操作 Normal</a>
      <a href="javascript:;" class="weui-btn weui-btn_primary weui-btn_loading"><i class="weui-loading"></i>页面主操作 Loading</a>
      <a href="javascript:;" class="weui-btn weui-btn_disabled weui-btn_primary">页面主操作 Disabled</a>
      <div class="button-sp-area mt30">
        <a href="javascript:;" class="weui-btn weui-btn_plain-primary">按钮</a>
        <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary" >按钮</a>
      </div>

      <!-- checkbox -->
      <div class="weui-cells weui-cells_checkbox">
        <label class="weui-cell weui-check__label" for="s12">
            <div class="weui-cell__hd">
                <input type="checkbox" name="checkbox1" class="weui-check" id="s12">
                <i class="weui-icon-checked"></i>
            </div>
            <div class="weui-cell__bd">
                <p>standard is dealicient for u.</p>
            </div>
        </label>
        <label class="weui-cell weui-check__label" for="s11">
            <div class="weui-cell__hd">
                <input type="checkbox" class="weui-check" name="checkbox1" id="s11" checked="checked">
                <i class="weui-icon-checked"></i>
            </div>
            <div class="weui-cell__bd">
                <p>standard is dealt for u.</p>
            </div>
        </label>
      </div>

      <!-- switch -->
      <div class="weui-cells weui-cells_form">
          <div class="weui-cell weui-cell_switch">
              <div class="weui-cell__bd">兼容IE Edge的版本</div>
              <div class="weui-cell__ft">
                  <label for="switchCP" class="weui-switch-cp">
                      <input id="switchCP" class="weui-switch-cp__input" type="checkbox" checked="checked">
                      <div class="weui-switch-cp__box" ></div>
                  </label>
              </div>
          </div>
      </div>

      <!-- slider -->
      <div class="weui-slider-box">
          <div class="weui-slider">
              <div id="sliderInner" class="weui-slider__inner">
                  <div id="sliderTrack" style="width: 50%;" class="weui-slider__track"  ></div>
                  <div id="sliderHandler" style="left: 50%;" class="weui-slider__handler"></div>
              </div>
          </div>
          <div id="sliderValue" class="weui-slider-box__value">50</div>
      </div>

      <!-- icon -->
      <div class="icon_sp_area">
        <i class="weui-icon-success weui-icon_msg"></i>
          <i class="weui-icon-success"></i>
          <i class="weui-icon-success-no-circle"></i>
          <i class="weui-icon-warn"></i>
          <i class="weui-icon-download"></i>
          <i class="weui-icon-info-circle"></i>
          <i class="weui-icon-cancel"></i>
      </div>

    </div>
  </div>
</template>

<script>
export default {
  name: 'demo-flex',
  data () {
    return {}
  },
}
</script>

<style lang="less">
.eg-item-wrap{
  margin:0 20px 20px 20px;
}
.ui-header-home-icon{
  font-size: 40px;
}
</style>
